<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
			Vue中使用组件的三大步骤：
					一、定义组件(创建组件)
					二、注册组件
					三、使用组件(写组件标签)

			一、如何定义一个组件？
						使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
						区别如下：
								1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
								2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
						备注：使用template可以配置组件结构。

			二、如何注册组件？
							1.局部注册：靠new Vue的时候传入components选项
							2.全局注册：靠Vue.component('组件名',组件)

			三、编写组件标签：
							<school></school>
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <ul>
            <li @click="currentView = 'schoolDetail'"></li>
            <li @click="currentView = 'teacherDetail'"></li>
            <li @click="currentView = 'studentDetail'"></li>
        </ul>
        <!-- Vue.js动态组件，多个组件可以使用同一挂载点，根据条件来切换不同的组件，使用保留标签<component></component>，应用在路由控制、tab切换等场景 -->
        <component :is="currentView"></component>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    //创建vm1
    new Vue({
        el: '#root',
        data: {
            currentView: 'home'
        },
        //第二步：注册组件（局部注册，频繁使用）
        components: {
            // // 完整写法 别名:组件命
            // // school:school
            // // 简写
            // school,
            // student
            schoolDetail: { template: "<div>schoolDetail<div>" },
            teacherDetail: { template: "<div>teacherDetail<div>" },
            studentDetail: { template: "<div>studentDetail<div>" }
        }
    })
</script>

</html>